/* 左滑和右滑手势封装*/
var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
  /*手势的条件*/
  /*1.必须滑动过*/
  /*2.滑动的距离大于屏幕的1/3*/
  // 加过渡
  var addTransition=function () {
  	dom.style.transition = 'all 0.5s'//加入0.2秒的过渡效果
  	dom.style.webkitTransition = 'all 0.5s'//由于是css3，所以要做兼容
  }
  // 做位移
  var doTransform=function (translateX) {
  	dom.style.transform='translate('+translateX+'px,0)'
  	dom.style.webkitTransform = 'translate(' + translateX + 'px,0)'
  }
  // 清过渡
  var removeTransition=function () {
  	dom.style.transition = 'none'
  	dom.style.webkitTransition = 'none'
  }
  //阻止默认事件的函数
  var  preHandler = function(e){e.preventDefault()}
  var isMove = false
  var startX = 0
  var startY = 0 //用于判断是垂直方向滚动还是横向滑动
  var distanceX = 0
  var distanceY = 0
  var width=dom.offsetWidth
  dom.addEventListener('touchstart',function (e) {
    startX = e.touches[0].clientX
    startY = e.touches[0].clientY
  })
  dom.addEventListener('touchmove',function (e) {
    isMove = true
    var moveX = e.touches[0].clientX
    var moveY = e.touches[0].clientY
    distanceX = moveX - startX
    distanceY = moveY- startY
    if(Math.abs(distanceX)>Math.abs(distanceY) && Math.abs(distanceX)>10){ //如果横向滑动的距离大于垂直方向的距离，就阻止垂直滚动
      // console.log('bigdistanceX----'+distanceX)
      // console.log('distanceY----'+distanceY)
      //增加阻止默认的tuchmove-->纵向滚动事件  
      dom.addEventListener('touchmove',preHandler,true)
      // 清除过渡
      removeTransition()
      // 只做x方向的位移
	    dom.style.transform='translateX('+distanceX+'px)'
  	  dom.style.webkitTransform = 'translateX(' + distanceX+ 'px)'
    }else{ 
     
      // console.log(e)
      // console.log('distanceX----'+distanceX)
      // console.log('bigdistanceY----'+distanceY)
       //开启默认事件,即只做Y方向的滑动
      dom.removeEventListener('touchmove',preHandler,true)
      // 只做Y方向的位移
	    dom.style.transform='translateY('+distanceY+'px)'
  	  dom.style.webkitTransform = 'translateY('+distanceY+'px)'
    
    }
  })
  
  dom.addEventListener('touchend',function (e) {
    if(isMove){
      if(Math.abs(distanceX) > (width/3)){
        if(distanceX > 0){
          rightCallback && rightCallback.call(this,e,distanceX)
          /*该调用形式是
           1，先判断rightCallback存不存在，不存在，就不会执行&&后面的rightCallback.call(this,e)。
           2，存在就执行rightCallback.call(this,e)
           3，使用.call（）调用和（）调用的区别在于作用域，this是什么，
            3.1 call（）的作用域中，this是dom对象
            3.2 （）调用的作用域中，this是window

          */
          
        }else{
          leftCallback && leftCallback.call(this,e,distanceX)
          
        }
        // 清过渡
        removeTransition()
        // 做位移
        doTransform(0)  
      }else{
        //吸附回去
        //加过渡
        addTransition()
        //做位移
        doTransform(0)  
      }  
    }  
    
    /*重置参数*/
    isMove = false
    startX = 0
    distanceX = 0
  })
}
export default bindSwipeEvent
